<template>
	<view>
		<view class="header">
			<uni-nav-bar height="160rpx" class="uni-nav-bar" fixed="true" left-icon="left" :border="false" title="房源信息"
				@clickLeft="navBarClick"> </uni-nav-bar>
		</view>
		<view class="container">
			<view class="tenement">
				<view class="swiper">
					<u-swiper :list="RoomMessage.imageList" :height="200" indicatorMode="dot" :indicator="true"
						radius="0"></u-swiper>
				</view>
				<view class="information">
					<view style="font-size: 35rpx">{{ RoomMessage.RoomTitle }}</view>
					<view style="margin-top: 10rpx;">
						<u--text prefixIcon="map" iconStyle="font-size: 28rpx" color="#ababab" size="27.5rpx"
							:text="RoomMessage.address"></u--text>
					</view>
					<view
						style="width: 100%;height: 100rpx;display: flex;line-height: 100rpx; justify-content: space-between;align-items: center;">
						<view style="color: #ff6262;"><text style="font-size: 44rpx;">1400</text><text
								style="font-size: 26rpx;">元/月</text></view>
						<view style="font-size: 26rpx;color: #cecece;">25浏览 5月5日 更新</view>
					</view>
					<view
						style="width: 100%;height: 100rpx;display: flex;justify-content: space-between;align-items: center;">
						<view
							style=" width: 22%;wheight: 100%; padding: 0 20rpx; border-right: 1px solid #dfdfdf;text-align: center;line-height: 50rpx;">
							<view style="width: 100%;font-size: 26rpx;color: #999999;">面积</view>
							<view style="width: 100%;">45m²</view>
						</view>
						<view
							style="width: 30%;height: 100%; padding: 0 20rpx; border-right: 1px solid #dfdfdf;text-align: center;line-height: 50rpx;">
							<view style="width: 100%;font-size: 26rpx;color: #999999;">户型</view>
							<view style="width: 100%;">1室1厅1卫</view>
						</view>
						<view
							style="width: 26%; height: 100%; padding: 0 20rpx; border-right: 1px solid #dfdfdf;text-align: center;line-height: 50rpx;">
							<view style="width: 100%;font-size: 26rpx;color: #999999;">入住时间</view>
							<view style="width: 100%;">5月20日</view>
						</view>
						<view style="width: 22%;height: 100%;padding: 0 20rpx; text-align: center;line-height: 50rpx;">
							<view style="width: 100%;font-size: 26rpx;color: #999999;">楼层</view>
							<view style="width: 100%;">高/11</view>
						</view>
					</view>

					<view class="tags">
						<view v-for="(item,index) in tags" style="margin: 1rpx;">
							<u-tag :text="item" color="#333333" borderColor="#ebebeb" bgColor="#f2f2f2"> </u-tag>
						</view>
					</view>
					<view class="facility">
						<view style="height: 65rpx; font-size: 33rpx;">房屋设施</view>
						<view>
							<u-grid :border="false" col="5">
								<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex">
									<image style="width: 45rpx;height: 45rpx;" :src="listItem.src" mode=""></image>
									<text class="grid-text">{{listItem.title}}</text>
								</u-grid-item>
							</u-grid>
							<u-toast ref="uToast" />
						</view>
					</view>

					<view class="houseMap">
						<view style="height: 65rpx;">
							<text>位置周边</text>
						</view>
						<view class="map">
							<map style="width: 100%;" :latitude="latitude" :longitude="longitude" :markers="covers">
							</map>
						</view>
					</view>

					<view class="description">
						<view style="height: 65rpx;">
							<text>房源描述</text>
						</view>
						<view class="describe">
							<view>{{descAddress}}</view>
							<view> {{ description }} </view>
							<view>{{ nearby }}</view>
						</view>
					</view>
					<view
						style="width: 90%;padding: 30rpx; margin: 20rpx 0; background-color: #ffffff; display: flex;align-items: center;">
						<view style="width: 20%; height: 110rpx;line-height: 110rpx;">
							<u-avatar :src="avatar" size="50"></u-avatar>
						</view>
						<view style="width: 75%;height: 110rpx;line-height: 55rpx;">
							<view>魔法少女</view>
							<view style="font-size: 26rpx; color: #999999;">3个月前来过</view>
						</view>
						<view style="width: 18%; display: flex;">
							<image style="width: 45rpx;height: 45rpx;" :src="inform"></image>
							<view style="font-size: 26rpx;">举报</view>
						</view>
					</view>
					<view style="margin: 0 0 50rpx 0;">
						<u-notice-bar text="安心住保障房源信息真实，如虚假信息请举报"></u-notice-bar>
					</view>
					<view>
						<view style="width: 100%;display: flex;align-items: center;">
							<view style="width: 50%;text-align: left;font-weight: bold;font-size: 33rpx;">附近房源</view>
							<view style="width: 50%;text-align: right;font-size: 30rpx;">查看更多></view>
						</view>
						<view>
							<view style="width: 100%;height: 600rpx;padding: 20rpx 0;margin-top: 10rpx;"
								v-for="(room,index) in SelectedRooms" :key="index">
								<u-swiper height="390rpx" indicatorMode="dot" :indicator="true" :list="room.imgList"
									keyName="imgSrc" radius="7" circular></u-swiper>

								<view style="width: 100%;padding: 20rpx;line-height: 45rpx;">
									<view>{{room.roomTitle}}</view>
									<view>
										<u--text prefixIcon="map" :size='13' iconStyle="font-size: 29rpx"
											:text="room.roomAddress"></u--text>
									</view>
									<view style="width: 100%;display: flex;">
										<view style="margin: 5rpx;" v-for="(item,TableIndex) in room.roomLabel"
											:key="TableIndex">
											<u-tag size='mini' :text="item" plain> </u-tag>
										</view>
									</view>
									<view style="display: flex;height: 50rpx;line-height: 50rpx;">
										<view style="width: 30%; color: #ee4242;">
											￥{{room.roomMoney}}/月
										</view>
										<view style="width: 66%;height: 50rpx; text-align: right;">
											<image style="width: 30rpx;vertical-align: -5rpx;margin-right: 5rpx;"
												src="../../static/日期.png" mode="widthFix"></image>
											<text
												style="font-size: 27rpx;color: #9e9e9e;">可入住日期{{room.roomDataTime}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="bottom">
						<uni-load-more :status="status" :iconSize="18" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loading',
				SelectedRooms: [{
						imgList: [{
								imgSrc: 'https://www.ijuzhong.com/zhuangxiu/uploads/allimg/20200111/1578719044291_4.jpg'
							},
							{
								imgSrc: 'https://img1.baidu.com/it/u=2126214998,1644295934&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
							},
							{
								imgSrc: 'https://img0.baidu.com/it/u=2571859928,2111628958&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=335'
							},
						],
						roomTitle: '合租-昭阳版老房子-找米彩',
						roomAddress: '苏州莫愁路',
						roomLabel: ['长租', '老房子', '近地铁'],
						roomMoney: '1400',
						roomDataTime: '2024/08/10'
					},
					{
						imgList: [{
								imgSrc: 'https://img2.baidu.com/it/u=1795613048,2862580360&fm=253&fmt=auto&app=138&f=JPEG'
							},
							{
								imgSrc: 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F1002%2F9aa2a30bj00r0bx8r001mc000hs00hsm.jpg&thumbnail=660x2147483647&quality=80&type=jpg'
							},
							{
								imgSrc: 'https://img2.baidu.com/it/u=640370081,883809769&fm=253&fmt=auto&app=138&f=JPEG'
							},
						],
						roomTitle: '合租-昭阳版老房子-找米彩',
						roomAddress: '苏州莫愁路',
						roomLabel: ['长租', '老房子', '近地铁'],
						roomMoney: '1400',
						roomDataTime: '2024/08/10'
					},
					{
						imgList: [{
								imgSrc: 'https://www.ijuzhong.com/zhuangxiu/uploads/allimg/20200111/1578719044291_4.jpg'
							},
							{
								imgSrc: 'https://img1.baidu.com/it/u=2126214998,1644295934&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
							},
							{
								imgSrc: 'https://img0.baidu.com/it/u=2571859928,2111628958&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=335'
							},
						],
						roomTitle: '合租-昭阳版老房子-找米彩',
						roomAddress: '苏州莫愁路',
						roomLabel: ['长租', '老房子', '近地铁'],
						roomMoney: '1400',
						roomDataTime: '2024/08/10'
					},
					{
						imgList: [{
								imgSrc: 'https://www.ijuzhong.com/zhuangxiu/uploads/allimg/20200111/1578719044291_4.jpg'
							},
							{
								imgSrc: 'https://img1.baidu.com/it/u=2126214998,1644295934&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
							},
							{
								imgSrc: 'https://img0.baidu.com/it/u=2571859928,2111628958&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=335'
							},
						],
						roomTitle: '合租-昭阳版老房子-找米彩',
						roomAddress: '苏州莫愁路',
						roomLabel: ['长租', '老房子', '近地铁'],
						roomMoney: '1400',
						roomDataTime: '2024/08/10'
					},
					{
						imgList: [{
								imgSrc: 'https://www.ijuzhong.com/zhuangxiu/uploads/allimg/20200111/1578719044291_4.jpg'
							},
							{
								imgSrc: 'https://img1.baidu.com/it/u=2126214998,1644295934&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
							},
							{
								imgSrc: 'https://img0.baidu.com/it/u=2571859928,2111628958&fm=253&fmt=auto&app=138&f=JPEG'
							},
						],
						roomTitle: '合租-昭阳版老房子-找米彩',
						roomAddress: '苏州莫愁路',
						roomLabel: ['长租', '老房子', '近地铁'],
						roomMoney: '1400',
						roomDataTime: '2024/08/10'
					}
				],
				inform: this.$minioServerUrl + 'inform.png',
				avatar: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.y6rdSCGpxbfeb8Rd1CpSuwAAAA?rs=1&pid=ImgDetMain',
				descAddress: '位置:杭州萧山区地铁2号线振宁路奥体华悦城',
				description: '交通: 距离地铁2号线振宁路800米,走近道步行6 分钟;距离钱江世纪城站地铁3站;距离盈丰路地铁站左右世界望京博地中心地铁2站; \n 距离建设三路1站可换乘7号线距离山姆奥体印象城2公里左右',
				nearby: '周边环境: 楼下有德克士星巴克24小时便利店小餐馆等对面有宠物店水果店理发店等。',
				rent: ' 房租是押一付二,图片为真实拍摄,视频是当时中介发我的,视频是楼下的,精装修的布局都是一样的',
				latitude: 40.10440,
				longitude: 116.317,
				covers: [{
					id: 787878,
					latitude: 40.10440,
					longitude: 116.317,
					alpha: 0,
					label: {
						content: '西湖，奥体华悦城 \n 西湖区世纪中心89号',
						bgColor: '#ffffff',
						padding: 8,
						fontSize: 10,
						borderRadius: 6
					}
				}],
				tags: ['有电梯', '民水民电', '集中供暖', '可做饭', '带独卫', '宠物友好'],
				RoomMessage: {
					imageList: ["https://www.ijuzhong.com/zhuangxiu/uploads/allimg/20200111/1578719044291_4.jpg",
						"https://img1.baidu.com/it/u=2126214998,1644295934&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500",
						"https://img0.baidu.com/it/u=2571859928,2111628958&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=335",
						"https://img2.baidu.com/it/u=1795613048,2862580360&fm=253&fmt=auto&app=138&f=JPEG"
					],
					RoomTitle: "合租-朝阳区都市海岸中心-主卧独卫朝南",
					address: '陕西省西安市未央区建章路'
				},
				list: [{
						src: this.$minioServerUrl + 'wifi.png',
						title: 'wifi'
					},
					{
						src: this.$minioServerUrl + 'refrigerator.png',
						title: '冰箱'
					},
					{
						src: this.$minioServerUrl + 'park.png',
						title: '停车场'
					},
					{
						src: this.$minioServerUrl + 'television.png',
						title: '电视'
					},
					{
						src: this.$minioServerUrl + 'password.png',
						title: '密码锁'
					},
					{
						src: this.$minioServerUrl + 'wardrobe.png',
						title: '衣柜'
					},
					{
						src: this.$minioServerUrl + 'calorifier.png',
						title: '热水器'
					}
				]
			};
		},
		methods: {
			navBarClick() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	//自定义uni-nav-bar导航栏标题样式
	/deep/ .uni-nav-bar .uni-nav-bar-text {
		font-size: 40rpx !important;
		color: black !important;
		font-weight: bold;
	}

	.container {
		width: 100%;

		.tenement {
			width: 100%;

			.swiper {
				width: 100%;
				height: 400rpx;
			}

			.information {
				width: 92%;
				padding: 20rpx 30rpx;
			}

			.tags {
				margin: 20rpx 0;
				display: flex;
				flex-wrap: wrap;
				// justify-content: space-between;
			}

			.facility {
				width: 100%;
				margin: 45rpx 0;

				.grid-text {
					font-size: 14px;
					color: #909399;
					padding: 10rpx 0 20rpx 0rpx;
					/* #ifndef APP-PLUS */
					box-sizing: border-box;
					/* #endif */
				}
			}

			.houseMap {
				width: 100%;
				height: 400rpx;

				.map {
					width: 100%;
					height: 100%;
				}
			}

			.description {
				width: 100%;

				.describe {
					width: 100%;
					font-size: 28rpx;
				}
			}

		}
	}
</style>